<template>
  <el-menu :default-active="activeMenuItem" class="el-menu-top" mode="horizontal">

    <el-menu-item v-for="item in menuItems" :key="item.path" :index="item.path">
      <router-link :to="item.path">{{ item.title }}</router-link>
    </el-menu-item>
  
    <el-menu-item class="menu-right">
      <span>{{ currentDate }}</span>
    </el-menu-item>
    
  </el-menu>
</template>





<script>

export default {
  name: 'Menu',
  props: {
    menuItems: Array,
    activeMenuItem: String,
  },
  data() {
    return {
      currentDate: ''
    };
  },
  created() {
    setInterval(() => {
      const now = new Date();
      const year = now.getFullYear().toString();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now.getDate().toString().padStart(2, '0');
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const seconds = now.getSeconds().toString().padStart(2, '0');
      this.currentDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }, 1000);
  }
};
</script>

<style scoped>
.menu-right {
  margin-left: auto;
}
</style>


